<template>
      <div class="transit">
          <div class="transit_menu">
              <div class="transit_cont">
                    <div class="transit_go_back fl" @click="go_back"></div>
                    <div class="transit_input fl">
                        <form action="." >
                            <input type="search" class="transit_key" v-focus v-model="keyword" placeholder="搜索感兴趣的内容" @keypress="jumpSearch" ref="input"/>
                        </form>    
                    </div>
                    <div class="transit_search fr" @click="search">搜索</div>
                    <div class="clear"></div>
               </div>     
          </div>
          <div  class="history_search transit_content"  v-if="historySearch">
                <div class="search_history">
                    <div class="search_title">历史搜索</div>
                    <div class="search_clear" @click="clear"></div>
                </div>
                <span  v-for="(item, index) in historyArr" :key="index" @click="getKey(item)">{{item}}</span>
          </div>
         <div class="hot_search transit_content">
                <div class="search_title">热门搜索</div>
                 <router-link :to="{path:'/possess',query: {keyword:'女装'}}"><span>女装</span></router-link>
                 <router-link :to="{path:'/possess',query: {keyword:'男装'}}"><span>男装</span></router-link>
                 <router-link :to="{path:'/possess',query: {keyword:'居家'}}"><span>居家</span></router-link>
                 <router-link :to="{path:'/possess',query: {keyword:'美妆'}}"><span>美妆</span></router-link>
                 <router-link :to="{path:'/possess',query: {keyword:'儿童'}}"><span>儿童</span></router-link>
                 <router-link :to="{path:'/possess',query: {keyword:'母婴'}}"><span>母婴</span></router-link>
          </div>
      </div>
</template>
<script>
      export default {
        name: 'Transit',
        data () {
             return {
                keyword:'',
                historyArr:'',
                historySearch:false,
             }
        } ,
        created(){
          document.title = '搜索';
        },
         mounted() {
            if (localStorage.searchName) {
             this.historySearch=true;
             var searchName=localStorage.getItem('searchName');
             searchName=searchName.substring(0,searchName.length-1);
             var searchNameArr= searchName.split(",");
             searchNameArr=this.unique(searchNameArr).reverse();
             this.historyArr=searchNameArr.slice(0,12);
            }
          },
        directives: {
          focus: {
            // 指令的定义
            inserted: function (el) {
              el.focus()
            }
          }
        },
        methods:{
            search(){
               var keyword=this.keyword;

               if(keyword==""){
                  Toast('请输入搜索词');
                  return;
               }else{
                   if (!localStorage.searchName) {
                       localStorage.setItem('searchName','');
                   }
                   var searchName=localStorage.getItem('searchName');
                  searchName+=keyword+',';
                 localStorage.setItem('searchName',searchName);
                 this.$router.push({path:'/possess',query:{keyword:keyword}});
               }
            },
            jumpSearch(e){
                var keycode = e.keyCode;
                if(keycode=='13') {
                    e.preventDefault();
                    this.search();
                }
            },
            go_back(){
              this.$router.go(-1);
            },
            unique(arr){
              var hash=[];
              for (var i = 0; i < arr.length; i++) {
                 if(hash.indexOf(arr[i])==-1){
                  hash.push(arr[i]);
                 }
              }
              return hash;
            },
            getKey(e){
              this.keyword=e;
               this.$router.push({path:'/possess',query:{keyword:e}});
            },
            clear(){
                this.historySearch="";
                localStorage.removeItem('searchName');
            }
        },
      }
</script>
<style scoped>
 .transit_input{width:76%;}
 .transit_menu{width:100%;height:98px;line-height:68px;padding-top:20px;background:#FFE514;}
 .transit_menu .transit_cont{width:96%;margin:0 auto;}
 .transit_key{width:100%;height:68px;line-height:68px;border:none;border-radius:34px;font-size:28px;background: #F8F8F8 url(/static/images/glass.png) no-repeat right 20px center;background-size:40px 40px;text-indent:26px;}
 .transit_go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat left center;background-size:100% 100%;margin-right:2%;margin-top:12px;}
 .transit_search{width:10%;line-height:68px;font-size:28px;color: #000;}
 .transit_content{text-align:left;width:92%;margin:0 auto;margin-top:60px;}
 .search_history{  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;}
  .search_history  .search_clear{width:40px;height:40px;background:url(/static/images/clear.png);background-size:100% 100%;}
 .search_title{font-size:28px;color:#000000;margin-bottom:40px;}
  .transit_content span{color:#4A4A4A;font-size:28px;background:#F8F8F8;padding:8px 30px;margin-right:20px;border-radius:30px;display:inline-block;margin-bottom:20px;}
</style>
